import { forwardRef } from "preact/compat";
import { logo } from "../signals";
import { settings } from "../settings";
import { Citrus } from "lucide-preact";

const Logo = forwardRef(({ onClick, onContextMenu, slide }, reference) => (
  <button
    onClick={onClick}
    onContextMenu={onContextMenu}
    class="m-auto size-max appearance-none"
    ref={reference}
  >
    {logo.value && settings.value.searchPart.logoVendor ? (
      <img
        src={logo}
        class={slide ? "object-contain" : ""}
        alt="书签"
        style={{
          width: slide ? 36 : settings.value.searchPart.logoWidth,
          height: slide ? 36 : settings.value.searchPart.logoHeight,
          borderRadius: 300 * settings.value.searchPart.logoRadius,
        }}
      />
    ) : (
      <Citrus
        class="text-orange-400 drop-shadow-md/50 drop-shadow-orange-400"
        alt="书签"
        style={{
          width: slide ? 36 : settings.value.searchPart.logoWidth,
          height: slide ? 36 : settings.value.searchPart.logoHeight,
          borderRadius: 300 * settings.value.searchPart.logoRadius,
        }}
      />
    )}
  </button>
));

export default Logo;
